<template>
  <q-page class="row items-center justify-evenly">
    <q-list bordered separator>
      <q-item
        v-for="(item, index) in categoryList"
        :key="index"
        clickable
        v-ripple
      >
        <q-item-section
          ><span>{{ item.categoryName }}</span
          ><span>({{ item.postCount }})</span></q-item-section
        >
      </q-item>
    </q-list>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import categoryApi from 'src/api/category/index';
import { Category } from 'src/models/category';

@Component({
  components: {},
  async mounted() {
    const res = await categoryApi.getCategoryCollect();
    if (res.success) (this as any).categoryList = res.data;
    this.$store.dispatch('headerCover/Init', {
      visible: true,
      title: '分类',
      bgImg:
        'https://tva4.sinaimg.cn/large/0084aYsLly1ge7bivvvswj31hc0u078j.jpg',
      showArrow: false,
      subTitle: `目前共${(this as any).categoryList.length}个分类`
      // subtitle: `最后更新与${store.state.article.archive.data.statistics.lastUpdateTime}`,
    });
  }
})
export default class CategoryCollect extends Vue {
  private categoryList: Category[] = [];
}
</script>
